<template>
  <el-card class="content">
    <el-form :model="query" ref="eddFormRef" :inline="true">
      <el-form-item label="开始时间:">
        <el-date-picker
          type="datetime"
          placeholder="选择开始日期"
          default-time="00:00:00"
          size="mini"
          v-model="startTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间:">
        <el-date-picker
          type="datetime"
          placeholder="选择结束日期"
          default-time="00:00:00"
          size="mini"
          v-model="endTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="统计时间类型:" v-if="this.query.monitorTypeId == 3">
        <el-select v-model="query.timeType" size="mini">
          <el-option label="静态10分钟" value="s_1h"></el-option>
          <el-option label="动态10分钟" value="10"></el-option>
          <el-option label="动态1小时" value="1"></el-option>
          <el-option label="动态2小时" value="2"></el-option>
          <el-option label="动态6小时" value="6"></el-option>
          <el-option label="动态24小时" value="24"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          size="mini"
          type="primary"
          @click="getManpowerVersusAutomation"
          >查询</el-button
        >
      </el-form-item>
      <br />
      <el-form-item label="监测类型:">
        <el-select
          v-model="query.monitorTypeId"
          clearable
          placeholder="请选择监测类型"
          @change="selectGoodsByGroupId($event)"
          size="mini"
        >
          <el-option
            v-for="item in monitorTypeList"
            :key="item.monitorTypeId"
            :value="item.monitorTypeId"
            :label="item.typeName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="站点名称:">
        <el-select
          v-model="query.monitorId"
          clearable
          placeholder="请选择站点名称"
          size="mini"
          @change="changeCharts($event)"
        >
          <el-option
            v-for="item in monitorList"
            :key="item.monitorId"
            :value="item.monitorId"
            :label="item.monitorName"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <p
      class="data"
      v-show="comparisonAutomationShow"
      style="text-align: center"
    >
      暂无数据
    </p>
    <div
      id="ComparisonAutomation"
      v-show="comparisonAutomationShows"
      style="height: 67vh"
    ></div>
  </el-card>
</template>

<script>
import echarts from "echarts";

import {
  getMonitoringAndMonitoringType,
  getManpowerVersusAutomation,
} from "../../../api/api";
import moment from "moment";
export default {
  name: "MonitorSystemManagement",
  props: {
    node: Object,
  },
  data() {
    return {
      comparisonAutomationShow: false,
      comparisonAutomationShows: true,
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      startTime: moment().subtract(1, "month").format("YYYY-MM-DD 00:00:00"),
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      query: {
        page: 1,
        pagesize: 10,
        timeType: "24",
        monitorTypeId: null,
        monitorId: null,
      },
      monitorTypeList: [],
      monitorList: [],
      myChart: null,
    };
  },
  mounted() {
    this.getMonitoringAndMonitoringType();
  },
  methods: {
    // 获取监测类型及监测
    async getMonitoringAndMonitoringType() {
      const res = await getMonitoringAndMonitoringType({
        tailingPondId: sessionStorage.getItem("sensorId"),
      });
      if (res.resultCode == "200") {
        this.monitorTypeList = res.parameter;
        this.query.monitorTypeId = this.monitorTypeList[0].monitorTypeId;
        this.query.monitorId =
          this.monitorTypeList[0].monitoringList[0].monitorId;
        this.getManpowerVersusAutomation();
        this.selectGoodsByGroupId(this.query.monitorTypeId);
      } else {
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
      }
    },
    changeCharts() {
      this.getManpowerVersusAutomation();
    },
    async getManpowerVersusAutomation() {
      var myChart = echarts.init(
        document.getElementById("ComparisonAutomation")
      );
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.startTime).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(this.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getManpowerVersusAutomation({
        startTime: queryData.startTime,
        endTime: queryData.endTime,
        monitorTypeId: this.query.monitorTypeId,
        monitorId: this.query.monitorId,
        monitorName: this.query.monitorName,
        timeType: this.query.timeType,
      });
      if (res.resultCode == 200) {
        this.comparisonAutomationShows = true;
        this.comparisonAutomationShow = false;
        // 自动化数据
        this.autoDataList = res.parameter.autoDataList;
        // 人工数据
        this.manualDataList = res.parameter.manualDataList;
        if (this.query.monitorTypeId !== 3) {
          if (this.query.monitorTypeId !== 5) {
            var yName = "长度";
          } else {
            var yName = "单位";
          }
          var autoData = [];
          var manualData = [];
          var timeData = [];

          // 自动化进行赋值
          for (let i = 0; i < this.autoDataList.length; i++) {
            var obj8 = new Object();
            obj8.value = Number(this.autoDataList[i].data).toFixed(3);
            autoData[i] = obj8;
            var obj9 = new Object();
            obj9.value = this.autoDataList[i].theDate;
            timeData[i] = obj9;
          }
          // 人工进行赋值
          for (let j = 0; j < this.manualDataList.length; j++) {
            var obj10 = new Object();
            obj10.value = Number(this.manualDataList[j].data).toFixed(3);
            manualData[j] = obj10;
          }
          var maxAuto = Math.max.apply(
            null,
            autoData.map(function (o) {
              return o.value;
            })
          );
          var maxManual = Math.max.apply(
            null,
            manualData.map(function (o) {
              return o.value;
            })
          );
          var maxList = [];
          maxList.push(maxAuto, maxManual);
          var max = Math.max.apply(
            null,
            maxList.map(function (o) {
              return o;
            })
          );
          let chartOption = {
            tooltip: {
              trigger: "axis",
              formatter(params) {
                let tip = params[0].name + "<br/>";
                for (let y = 0; y < params.length; y++) {
                  tip +=
                    params[y].marker +
                    params[y].seriesName +
                    " : " +
                    params[y].value +
                    "m<br/>";
                }
                return tip;
              },
            },
            color: ["#33CCFF", "#33FF33"],
            legend: {
              top: 30,
              itemHeight: 2,
              data: [
                { name: "在线监测", icon: "rect" },
                { name: "人工", icon: "rect" },
              ],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "4%",
              containLabel: true,
            },
            toolbox: {
              right: "5%",
              show: true,
              feature: {
                saveAsImage: { show: true },
              },
            },
            xAxis: {
              name: "时间",
              nameLocation: "center",
              nameTextStyle: {
                padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
              },
              type: "category",
              boundaryGap: false,
              data: timeData,
            },
            yAxis: {
              name: yName + "(m)",
              type: "value",
              max: Math.ceil(max * 2),
              min: Math.ceil(-1 * max),
            },
            series: [
              {
                name: "在线监测",
                type: "line",
                yAxisIndex: 0,
                lineStyle: {
                  color: "#33a3dc",
                  type: "solid",
                },
                data: autoData,
              },
              {
                name: "人工",
                type: "line",
                yAxisIndex: 0,
                lineStyle: {
                  color: "#33FF33",
                  type: "solid",
                },
                data: manualData,
              },
            ],
          };
          myChart.hideLoading();
          myChart.setOption(chartOption, true);
          setTimeout(function () {
            window.onresize = function () {
              myChart.resize();
            };
          }, 200);
        } else {
          var autoDataX = [];
          var autoDataY = [];
          var autoDataH = [];
          var manualDataX = [];
          var manualDataY = [];
          var manualDataH = [];
          var theDate = [];
          // 自动化进行赋值
          for (let i = 0; i < this.autoDataList.length; i++) {
            var obj1 = new Object();
            obj1.value = Number(this.autoDataList[i].xdata).toFixed(3);
            autoDataX[i] = obj1;
            var obj2 = new Object();
            obj2.value = Number(this.autoDataList[i].ydata).toFixed(3);
            autoDataY[i] = obj2;
            var obj3 = new Object();
            obj3.value = Number(this.autoDataList[i].hdata).toFixed(3);
            autoDataH[i] = obj3;
            var obj4 = new Object();
            obj4.value = this.autoDataList[i].theDate;
            theDate[i] = obj4;
          }
          // 人工进行赋值
          for (let j = 0; j < this.manualDataList.length; j++) {
            var obj5 = new Object();
            obj5.value = Number(this.manualDataList[j].xdata).toFixed(3);
            manualDataX[j] = obj5;
            var obj6 = new Object();
            obj6.value = Number(this.manualDataList[j].ydata).toFixed(3);
            manualDataY[j] = obj6;
            var obj7 = new Object();
            obj7.value = Number(this.manualDataList[j].hdata).toFixed(3);
            manualDataH[j] = obj7;
          }
          var maxAutoX = Math.max.apply(
            null,
            autoDataX.map(function (o) {
              return o.value;
            })
          );
          var maxAutoY = Math.max.apply(
            null,
            autoDataY.map(function (o) {
              return o.value;
            })
          );
          var maxAutoH = Math.max.apply(
            null,
            autoDataH.map(function (o) {
              return o.value;
            })
          );
          var maxManualX = Math.max.apply(
            null,
            manualDataX.map(function (o) {
              return o.value;
            })
          );
          var maxManualY = Math.max.apply(
            null,
            manualDataY.map(function (o) {
              return o.value;
            })
          );
          var maxManualH = Math.max.apply(
            null,
            manualDataH.map(function (o) {
              return o.value;
            })
          );
          var maxList = [];
          maxList.push(maxAutoX, maxAutoY, maxAutoH,maxManualX, maxManualY, maxManualH,);
          var max = Math.max.apply(
            null,
            maxList.map(function (o) {
              return o;
            })
          );
          let chartOption = {
            tooltip: {
              trigger: "axis",
              formatter(params) {
                let tip = params[0].name + "<br/>";
                for (let y = 0; y < params.length; y++) {
                  tip +=
                    params[y].marker +
                    params[y].seriesName +
                    " : " +
                    params[y].value +
                    "mm<br/>";
                }
                return tip;
              },
            },
            color: [
              "#33a3dc",
              "#0000CC",
              "#464547",
              "#33FFFF",
              "#66FF66",
              "#CC00FF",
            ],
            legend: {
              top: 30,
              itemHeight: 2,
              data: [
                { name: "在线监测-∆X", icon: "rect" },
                { name: "在线监测-∆Y", icon: "rect" },
                { name: "在线监测-∆H", icon: "rect" },
                {
                  name: "人工-∆X",
                  icon: "image://" + require("../../../assets/xuxian/1.png"),
                },
                {
                  name: "人工-∆Y",
                  icon: "image://" + require("../../../assets/xuxian/2.png"),
                },
                {
                  name: "人工-∆H",
                  icon: "image://" + require("../../../assets/xuxian/3.png"),
                },
              ],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: { show: true },
              },
              right: "5%",
            },
            xAxis: {
              name: "时间",
              nameLocation: "center",
              nameTextStyle: {
                padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
              },
              type: "category",
              boundaryGap: false,
              data: theDate,
            },
            yAxis: {
              name: "位移/mm",
              type: "value",
               max: Math.ceil(max * 2),
                min: Math.ceil(-1* max),
            },
            series: [
              {
                name: "在线监测-∆X",
                type: "line",
                yAxisIndex: 0,
                lineStyle: {
                  color: "#33a3dc",
                  type: "solid",
                },
                data: autoDataX,
              },
              {
                name: "在线监测-∆Y",
                type: "line",
                yAxisIndex: 0,
                lineStyle: {
                  color: "#0000CC",
                  type: "solid",
                },
                data: autoDataY,
              },
              {
                name: "在线监测-∆H",
                type: "line",
                yAxisIndex: 0,
                lineStyle: {
                  color: "#464547",
                  type: "solid",
                },
                data: autoDataH,
              },
              {
                name: "人工-∆X",
                type: "line",
                yAxisIndex: 0,
                lineStyle: {
                  color: "#33FFFF",
                  type: "dashed",
                },
                data: manualDataX,
              },
              {
                name: "人工-∆Y",
                type: "line",
                yAxisIndex: 0,
                lineStyle: {
                  color: "#66FF66",
                  type: "dashed",
                },
                data: manualDataY,
              },
              {
                name: "人工-∆H",
                type: "line",
                yAxisIndex: 0,
                lineStyle: {
                  color: "#CC00FF",
                  type: "dashed",
                },
                data: manualDataH,
              },
            ],
          };
          myChart.hideLoading();
          myChart.setOption(chartOption, true);
          setTimeout(function () {
            window.onresize = function () {
              myChart.resize();
            };
          }, 200);
        }
      } else {
        this.comparisonAutomationShows = false;
        this.comparisonAutomationShow = true;
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
      }
    },
    // 选择父级 -->显示子级数据 并父级变化子级清理
    selectGoodsByGroupId(val) {
      this.monitorList = [];
      // this.query.monitorId = "";
      if (this.query.monitorTypeId == 3) {
        this.query.timeType = "s_1h";
      } else if (this.query.monitorTypeId == 4) {
        this.query.timeType = "10m";
      } else if (this.query.monitorTypeId == 6) {
        this.query.timeType = "1h";
      } else {
        this.query.timeType = null;
      }
      for (let i = 0; i < this.monitorTypeList.length; i++) {
        if (
          val == this.monitorTypeList[i].monitorTypeId &&
          val != null &&
          val != "" &&
          val != undefined
        ) {
          for (
            let j = 0;
            j < this.monitorTypeList[i].monitoringList.length;
            j++
          ) {
            if (this.monitorTypeList[i].monitoringList != null) {
              this.monitorList.push(this.monitorTypeList[i].monitoringList[j]);
            } else {
              this.monitorList = [];
            }
          }
          this.query.monitorId = this.monitorList[0].monitorId;
        }
      }
      this.getManpowerVersusAutomation();
    },
  },

  //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
    //观察option的变化
    chartOption: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        } else {
          myChart.setOption(chartOption);
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
};
</script>

<style scoped>
.content {
  height: 86vh;
  margin-left: 0.08rem;
  overflow: auto;
}
.data {
  text-align: center;
}
</style>
